<!DOCTYPE html>
<html lang="ja">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=320, height=480">
    
    <title>借入・返却一覧</title>
    <link rel="stylesheet" href="../css/common.css" />
	<script type="text/javascript" src="../js/common.js"></script>
	<script type="text/javascript">
    function goNextPage(id, status) {
        var param = "id=" + id + "&" + "status=" + status;
        location.href = "borrowing.html?" + param;
    }
    
	function load() {
		// ログインID取得
		var loginId = sessionStorage.getItem("LOGIN_ID");
		// ユーザー名取得
		var loginUserName = sessionStorage.getItem("USER_NAME");
		
	    // ユーザー名表示
	    var loginUserNameTarget = document.getElementById('userName');
	    loginUserNameTarget.innerHTML = loginUserName;
	    
        // パラメータ生成
        var param = {"login_id":loginId};

        // リクエスト送信
        sendRequest("tmapp/borrow/getBorrowingInfoList", param);
	}
	
    function callback(request) {
    	var json = eval( '(' + request.responseText + ')' );	// JSONを配列に変換
    	var data = json["data"];
		var numOfRows = data.length;
		
		var result = "";
		
		if (numOfRows > 0) {
	    	// 取得結果出力
		    result = '<table>';
		    //result += '<tr><td>状態</td><td>品物名</td><td>個数</td><td>貸与者</td><td>返却予定日</td><td>借入/返却</td></tr>';
		    result += '<tr><td>品物名</td><td>個数</td><td>貸与者</td><td>返却予定日</td><td></td></tr>';

		    for(var i = 0; i < numOfRows; i++){
		    	var statusName = data[i]["statusName"].replace("貸出", "借入");
		    	
		        result += '<tr>';

		        //result += '<td>' + statusName			 	 + '</td>';	// 状態
		        result += '<td>' + data[i]["lendingName"] 	 + '</td>';	// 品物名
		        result += '<td>' + data[i]["count"] 		 + '</td>';	// 個数
		        result += '<td>' + data[i]["userName"] 		 + '</td>';	// 貸与者
		        result += '<td>' + data[i]["returnPlanDate"] + '</td>';	// 返却予定日
		        
				// 借入/返却
		        var actionName;
		        if (data[i]["statusType"] == "2") {
		        	actionName = "返却";
		        } else if (data[i]["statusType"] == "1"){
		        	actionName = "借入";
		        } else {
		        	actionName = "??";
		        }
				
		        result += '<td>';
		        result += '<input type="button" class="smallBtn" value="' + actionName+ '" onclick="goNextPage(' + data[i]["id"] + ',' + data[i]["statusType"] + ');">';
		        /*
		        result += '<a href="javascript:void(0);" onclick="goNextPage(' + data[i]["id"] + ',' + data[i]["statusType"] + ');">' +  actionName + '</a>';
		        */
				result += '</td>'
		        result += '</tr>';
		    }

		    result += '</table>';
		} else {
			result += "<br><br><br><br><br>借入中または借入予約中の品物がありません。";
		}
		
		// 一覧表示
	    var target = document.getElementById('list');
	    target.innerHTML = result;
    }
	</script>
</head>
<body onload="load()">
    <header>
    	<table class="titleLine">
    		<tr>
    			<td class="title">借入・返却一覧</td>
    			<td id="userName" class="userName"></td>
    		</tr>
    	</table>
		<div class="line"></div>
		<h3>
			<a href="javascript:void(0);" onclick="logout()">ログアウト</a>
			&nbsp;>&nbsp;
			<a href="javascript:void(0);" onclick="goMenu()">メニュー</a>
		</h3>
		<div class="line"></div>
    </header>
    
    <article>
    	<div class="vSpaceList1"></div>
		<div id="list" class="list"></p>
    </article>
</body>
</html>